<template>
  <div id="home">
    <nar-bar class="nav-home">
      <h3 slot="left"></h3>
      <h3 slot="center">首页</h3>
      <h3 slot="right"></h3>
    </nar-bar>
    <!-- 头部不需要滚动 -->
    <!-- :probetype不加：也可传递，不过通通是字符串3  demo="[100,200,300]"是传入是字符串 :demo="[100,200,300]"传入的是数组  -->
    <scroll
      class="scroll"
      ref="scroll"
      :scrolloption="scrollOption"
      @scroll="scroll"
      @pullingUp="loadMore"
    >
      <swiper :banner="multidata.banner" @swiperImageLoad="swiperImageLoad"></swiper>
      <recommendView :recommend="multidata.recommend"></recommendView>
      <FeatureView></FeatureView>
      <tab-control :title="goods.title" @tabClick="tabClick" ref="tabControl" class="home-tab-control"></tab-control>
      <!-- 自定义属性值不能驼峰命名。因为b-bind不支持驼峰自定义属性 -->
      <goods-list :goodslist="showGoods" @imageItemLoad="imageItemLoad"></goods-list>
    </scroll>
    <!-- 
    给vue组件绑定事件原生事件，必须加上native
    等同于在子组件中 向外发送click事件：$emit("click".fn)-->

    <come-back @click.native="backClick" v-show="isShow"></come-back>
  </div>
</template>

<script>
import { getHomeMultidata, getHomeGoods } from "network/home.js";
import { debounce} from "common/utils";
// 公共组件
import NarBar from "components/common/navbar/NavBar.vue";
import Swiper from "components/common/swiper/Swiper.vue";
import TabControl from "components/content/tabControl/TabControl";
import { GoodsList } from "components/content/goods/index.js";
import Scroll from "components/common/scroll/Scroll";
import ComeBack from "components/content/comeBack/ComeBack";
// 当前home组件
import RecommendView from "./HomeRecommend";
import FeatureView from "./FeatureView";

export default {
  name: "Home",
  components: {
    NarBar,
    Swiper,
    TabControl,
    GoodsList,
    Scroll,
    ComeBack,
    RecommendView,
    FeatureView
  },
  data() {
    return {
      multidata: {
        banner: [], //轮播图数据
        dKeyword: [],
        keywords: [],
        recommend: [] //首页中间四个li 十点抢券
      },
      goods: {
        title: ["流行", "新款", "精品"],
        goodsList: {
          pop: { page: 0, list: [] },
          new: { page: 0, list: [] },
          sell: { page: 0, list: [] }
        },
        currentType: "pop" //默认把pop的list数据传出去展示
      },
      // 控制返回顶部显示隐藏
      isShow: false,
      tabOffSetTop:0, //记录tabcontrol距离顶部高度
      // scroll自定义选项
      scrollOption: {
        probeType: 3,
        pullUpLoad: true,
        click: true
      }
    };
  },
  computed: {
    showGoods() {
      return this.goods.goodsList[this.goods.currentType].list;
    }
  },
  methods: {
    
    /*
        网络请求方法
      */
    async fetchHomeMutidata() {
      let res = await getHomeMultidata();
      let { banner, dKeyword, keywords, recommend } = res.data;
      // banner.list.forEach(element=>element.src=element.image) //手动增加src属性如果需要
      this.multidata.banner = banner.list;
      this.multidata.dKeyword = dKeyword.list;
      this.multidata.keywords = keywords.list;
      this.multidata.recommend = recommend.list;
    },
    async feachHomeGoods(type) {
      // 页码+1
      this.goods.goodsList[type].page++;
      let result = await getHomeGoods(type, this.goods.goodsList[type].page);
      // 把请求到数据追加列表中 返回值是新数组长度
      this.goods.goodsList[type].list.push(...result.data.list);
      this.$refs.scroll.finishPullUp();
    },
    tabClick(index) {
      // 修改curreentType导致 this.goods[this.currentType].list数据变化。数据变。试图变
      this.goods.currentType = Object.keys(this.goods.goodsList)[index];
    },

    backClick() {
      // console.log(this.$refs.scroll); //scroll组件vueCompent实例 可以访问scroll组件的data methods cumpted方法
      this.$refs.scroll.scrollTo(0, 0);
    },

    scroll(position) {
      this.isShow = Math.abs(position.y) > 1500 ? true : false;

      // 决定tabControl是否吸顶
      
    },
    // 加载更多
    loadMore() {
      // console.log("more---");
      this.feachHomeGoods(this.goods.currentType);
    },
    imageItemLoad() {
      // console.log("fa_imageload");
      debounce(this.$refs.scroll.refresh,this)();
    },
    // 监听轮播图加载图片完成。在计算tabControl高度
    swiperImageLoad(){
     
      this.tabOffSetTop=this.$refs.tabControl.$el.offsetHeight

    }
  },
  // 组件创建完执行回调函数
  created() {
    //  请求首页数据
    this.fetchHomeMutidata();
    // 请求商品pop sell new page=1的数据
    Object.keys(this.goods.goodsList).forEach(element => {
      this.feachHomeGoods(element);
    });
    // 测试环境下
    // this.feachHomeGoods(this.goods.currentType)
  },
  mounted() {
    // new
    // 监听imageitem加载完成
    // this.$bus.$on("imageItemLoad", () => {
    //   console.log("-----");
    //   debounce(this.$refs.scroll.refresh,this)()
    // });
    // this.$refs.tabControl是一个组件。所有组件都有一个$el属性.
    // 在mouted中直接获取tabcontrol的距离顶部高度，是不准确的，因为轮播图片高度可能没有加载
    // console.log(this.$refs.tabControl.$el) //tab-bar dom原生对象
    // this.tabOffSetTop=this.$refs.tabControl offSetHeight=内容高+padding+边框
    // console.log(this.$refs.tabControl.$el.offsetHeight)
  }
};
</script>


<style lang="less" scope>
#home {
  padding-top: 44px;
  height: 100vh;
}
.nav-home {
  background-color: var(--color-tint);
  color: #fff;
  font-size: 18px;
}
// .home-tab-control {
//   // 结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位
//   // 但当滚动到特定位置时就会固定在屏幕上如同 fixed
//   // 距离顶部40px.就变为fixed定位。其他还是正常relative
//   position: sticky;
//   top: 44px;
//   background: #fff;
// }
.scroll {
  // padding-top: 44px;
  height: calc(100% - 93px); //44px+49px
  touch-action: none;
}
</style>